function DataReporter(option) {
    this.option = option;
}

DataReporter.prototype = {
    start: function () {
        this.initWs();
        this.showCount();
    },
    initWs: function () {
        const _this = this;
        this.ws = new WebSocket(this.option.url);
        this.ws.onopen = function (e) {
            _this.onOpen(e);
        };
        this.ws.onclose = function (e) {
            _this.onClose(e);
        };
        this.ws.onmessage = function (e) {
            _this.onMessage(e);
        }
    },
    onOpen: function (e) {
        console.log('On websocket open', e);
    },
    onClose: function (e) {
        console.log('On Websocket close', e);
    },
    onMessage: function (e) {
        this.refreshCount();
        var data = e.data;
        data = JSON.parse(data);
        var packages = data.operBody;
        this.showLastData(packages);
        this.fillTable(packages);
    },
    refreshCount: function () {
        this.option.receiveTimeDom.text(++this.option.receiveTime);
        this.option.receiveCountDom.text(++this.option.receiveCount);
    },
    showLastData: function (data) {
        var _this = this;
        if (data.length > 0) {
            var line = data[0];
            var container = this.option.dataLine.clone().height(0);
            container.find('.date').text(new Date().toLocaleString());
            container.find('.package-code').text(line.packageCode);
            container.find('.length').text(line.pLength);
            container.find('.width').text(line.pWidth);
            container.find('.high').text(line.pHigh);
            container.find('.volume').text(line.volume);
            container.appendTo(this.option.dataLine.parent());
            container.height(0).animate({
                height: '70px'
            }, 300, function () {
                _this.option.dataLine.remove();
                _this.option.dataLine = container;
            });
        }
    },
    fillTable: function (packages) {
        for (var i in packages) {
            var line = packages[i];
            var tr = $('<tr></tr>');
            tr.append('<td>' + new Date().toLocaleString() + '</td>');
            tr.append('<td>' + line.packageCode + '</td>');
            tr.append('<td>' + line.pLength + '</td>');
            tr.append('<td>' + line.pWidth + '</td>');
            tr.append('<td>' + line.pHigh + '</td>');
            tr.append('<td>' + line.volume + '</td>');
            this.option.table.prepend(tr);
        }
    },
    showCount: function () {
        this.option.receiveTimeDom.text(this.option.receiveTime);
        this.option.receiveCountDom.text(this.option.receiveCount);
    }
};

$(function () {
    var totalCount = $("#total-count");
    var receiveCount = $("#receive-count");
    var receiveTime = $("#receive-time");
    var tableBody = $("#table-body");

    function fileHistoryTable(data) {
        for (var i in data) {
            var line = data[i];
            var tr = $('<tr></tr>');
            tr.append('<td>' + new Date().toLocaleString() + '</td>');
            tr.append('<td>' + line.packageCode + '</td>');
            tr.append('<td>' + line.plength + '</td>');
            tr.append('<td>' + line.pwidth + '</td>');
            tr.append('<td>' + line.phigh + '</td>');
            tr.append('<td>' + line.volume + '</td>');
            tr.appendTo(tableBody);
        }
    }

    function initReporter(options) {
        var reporter = new DataReporter(options);
        reporter.start();
    }

    $.get('/list', function (res) {
        var count = res.count;
        totalCount.text(count);
        fileHistoryTable(res.data);
        initReporter({
            url: 'ws://' + location.host + '/new-message-notifier',
            totalCount: count,
            receiveCount: 0,
            receiveTime: 0,
            receiveCountDom: receiveCount,
            receiveTimeDom: receiveTime,
            table: tableBody,
            dataLine: $("#data-line")
        });
    }, 'json');
});